<div class="pointer-events-none fixed top-10 inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
  <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
    <div
      id="notification-template"
      class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 transform ease-out duration-300 transition translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2 hidden"
    >
      <div class="p-4">
        <div class="flex items-center">
          <p class="w-0 flex-1 text-sm font-medium text-gray-900"></p>
        </div>
      </div>
    </div>
  </div>
</div>
